<template>
    <div class="grid grid-cols-2 h-screen">
        <!-- 布局，设置为两列，屏幕自适应，并设置高度为屏幕高度 -->
        <div class="col-span-2 order-2 p-10 md:col-span-1 md:order-1 animate__animated animate__bounceInLeft animate__fast "
            style="background-image: url('http://127.0.0.1:9000/weblog/wallhaven-pkq1wp_6000x6000.png'); background-size: cover;">
            <!-- 设置为主栏，占满列，并设置顺序为2，间距为10px，且在md设备上列宽为1，顺序为1，背景色为黑色 -->
            <div class="flex justify-center items-center h-full flex-col">
                <!-- 布局，设置 justify 为 center， items 为 center，占满行，并设置高度为屏幕高度 -->
                <!-- <img src="@/assets/暂无数据.png" class="w-1/2" /> -->
            </div>
        </div>

        <!-- 设置为次栏，占满列，并设置顺序为1，背景色为白色 -->
        <div class="flex flex-col col-span-2 order-1 md:col-span-1 md:order-2 bg-white dark:bg-gray-800">
            <!-- 切换白天黑夜主题  -->
            <label class="switch ml-auto mr-4 mt-2">
                <span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <g fill="#ffd43b">
                            <circle r="5" cy="12" cx="12"></circle>
                            <path
                                d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z">
                            </path>
                        </g>
                    </svg></span>
                <span class="moon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                        <path
                            d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z">
                        </path>
                    </svg></span>
                <input type="checkbox" class="input" v-model="isDarkThem" @click="toggleDark()">
                <span class="slider"></span>
            </label>
            <!-- 布局，设置为两列，屏幕自适应，并设置顺序为1，间距为10px，且在md设备上列宽为1，顺序为2，背景色为白色 -->
            <div
                class="flex justify-center items-center h-full flex-col animate__animated animate__bounceInRight animate__fast">
                <h1 class="font-bold text-4xl mb-5 dark:text-white">欢迎回来</h1>
                <div class="flex items-center justify-center mb-7 text-gray-400 space-x-2 dark:text-gray-500">
                    <!-- 水平方向 flex 布局，居中对齐 -->
                    <span class="h-[1px] w-16 bg-gray-200 dark:bg-gray-800"></span>
                    <!-- 账号密码登录文本 -->
                    <span>账号密码登录</span>
                    <span class="h-[1px] w-16 bg-gray-200 dark:bg-gray-800"></span>
                </div>
                <el-form class="w-5/6 md:w-2/5" ref="formRef" :rules="rules" :model="form">
                    <!-- 以element-ui的表单组件进行布局，设置表单宽度移动端为屏幕宽度的5/6，且在PC设备上宽度为2/5 -->
                    <el-form-item prop="username">
                        <!-- 表单项 -->
                        <el-input size="large" v-model="form.username" placeholder="请输入用户名" :perfix-icon="User" clearable />
                        <!-- 设置输入框大小为大号，占位符为"请输入用户名"，添加图标为User，并支持清除输入内容 -->
                    </el-form-item>
                    <el-form-item prop="password">
                        <!-- 表单项 -->
                        <el-input size="large" type="password" v-model="form.password" placeholder="请输入密码"
                            :perfix-icon="Lock" clearable show-password />
                        <!-- 设置输入框大小为大号，占位符为"请输入密码"，类型为密码，并添加图标为Lock，并支持清除输入内容 -->
                    </el-form-item>
                    <el-form-item>
                        <!-- 表单项 -->
                        <el-checkbox v-model="form.rememberMe" label="记住我" />
                        <!-- 设置输入框大小为大号，占位符为"请输入密码"，类型为密码，并添加图标为Lock，并支持清除输入内容 -->
                    </el-form-item>
                    <el-form-item>
                        <!-- 表单项 -->
                        <el-button class="w-full mt-2" type="primary" size="large" :loading="loading"
                            @click="onSubmit">登录</el-button>
                        <!-- 设置按钮样式为主色，大小为大号，形状为圆形，文本内容为"登录" -->
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
// 导入vue的响应式API
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
// 从"@element-plus/icons-vue"模块导入User和Lock组件
import { User, Lock } from "@element-plus/icons-vue";
// 从"./api/login"模块导入login函数
import { login } from "@/api/admin/user";
import { useRouter } from "vue-router";
import { showMessage } from "@/composables/util";
import { setToken } from "@/composables/cookie";
import { useUserStore } from "@/stores/user";
import { useDark, useToggle } from '@vueuse/core'

const userStore = useUserStore();
const router = useRouter();
// 定义响应式的表单对象
const form = reactive({
    username: "",
    password: "",
});
const formRef = ref(null);
const rules = {
    username: [
        {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
        },
    ],
};
// 定义加载动画的状态
const loading = ref(false);
// 定义登录函数
const onSubmit = () => {
    console.log("登录");
    // 表单验证
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log("表单验证不通过");
            return false;
        }
        // 显示加载动画
        loading.value = true
        // 登录函数
        login(form.username, form.password).then((res) => {
            console.log(res);
            if (res.success == true) {
                showMessage("登录成功");

                // 设置token
                let token = res.data.token;
                setToken(token);

                // 获取用户信息，并存储到全局状态中
                userStore.setUserInfo();

                // 登录成功，跳转到首页
                router.push("/admin/index");
            } else {
                let message = res.message;
                // 登录失败，提示用户
                showMessage(message, "error")
            }
        })
            .finally(() => {
                // 关闭加载动画
                loading.value = false
            })
    })
}

function onKeyUp(e) {
    console.log(e);
    if (e.key == 'Enter') {
        onSubmit()
    }
}

onMounted(() => {
    console.log("添加键盘监听");
    document.addEventListener('keyup', onKeyUp)
})

onBeforeUnmount(() => {
    console.log("移除键盘监听");
    document.removeEventListener('keyup', onKeyUp)
})

// 是否是黑夜
const isDarkThem = ref(true)
const isDark = useDark({
    onChanged(dark) {
        // update the dom, call the API or something
        console.log('onchange:' + dark)
        if (dark) {
            // 给 body 添加 class="dark"
            document.documentElement.classList.add('dark');
            // 设置 switch 的值
            isDarkThem.value = true
        } else {
            // 移除 body 中添加 class="dark"
            document.documentElement.classList.remove('dark');
            isDarkThem.value = false
        }
    },
})
const toggleDark = useToggle(isDark)
</script>

<style scoped>
.switch {
    font-size: 22px;
    position: relative;
    display: inline-block;
    width: 64px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #73C0FC;
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    border-radius: 20px;
    left: 2px;
    bottom: 2px;
    z-index: 2;
    background-color: #e8e8e8;
    transition: .4s;
}

.sun svg {
    position: absolute;
    top: 6px;
    left: 36px;
    z-index: 1;
    width: 24px;
    height: 24px;
}

.moon svg {
    fill: #73C0FC;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    width: 24px;
    height: 24px;
}

/* .switch:hover */
.sun svg {
    animation: rotate 15s linear infinite;
}

@keyframes rotate {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* .switch:hover */
.moon svg {
    animation: tilt 5s linear infinite;
}

@keyframes tilt {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.input:checked+.slider {
    background-color: #183153;
}

.input:focus+.slider {
    box-shadow: 0 0 1px #183153;
}

.input:checked+.slider:before {
    transform: translateX(30px);
}
</style>